<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>常用指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			常用内置指令
				v-text 		:  更新元素的 innerText
				v-html 		:  更新元素的 innerHTML
				v-if 	 		:  条件渲染（动态控制节点是否存存在）
				v-else 		:  条件渲染（动态控制节点是否存存在）
				v-show 		:  条件渲染 (动态控制display)
				v-for  		:  遍历数组/对象/字符串
				v-on   		:  绑定事件监听, 可简写为@
				v-bind:xxx : 单向绑定解析表达式, 可简写为 :xxx
				v-model		: 双向数据绑定
		-->

		<!-- 准备好一个容器-->
		<div id="root">
			<h1 v-text="msg"></h1>
			<div v-html="htmlStr"></div>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{
					msg:'你好啊',
					htmlStr:'<h4>1022班级就业顺利</h4>'
				}
			})
		</script>
	</body>
</html>